import React, { useEffect, useState } from "react";
import { Page, useNavigate, Button, Input } from "zmp-ui";
import { useRecoilValue, useSetRecoilState } from "recoil";
import { addressFormState, addressInfoState, countryState } from "../../state";
import request from "../../utils/request";
import "./Index.scss";
import { showToast } from "zmp-sdk";
import util from "../../utils/util";
import Loading from "../../components/Loading/Index";

const AddressPage = () => {
  const country = useRecoilValue(countryState);
  const saveAddressFormState = useSetRecoilState(addressFormState);
  const addressForm = useRecoilValue(addressFormState);
  const setCountryData = useSetRecoilState(countryState);
  const navigate = useNavigate();
  const requireFormFields = ["name", "telcode"]; // 表单验证字段
  const [form, setForm] = useState({ region: "" });
  const [formData, setFormData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [loadingText, setLoadingText] = useState("");
  const addressInfo = useRecoilValue(addressInfoState);

  const initCreate = () => {
    if (addressInfo) {
      // form["name"] = addressInfo["name"];
      // form["userphones"] = addressInfo["phone"];
      // form["telcode"] = addressInfo["tel_code"];
      // form["identitycard"] = addressInfo["identitycard"];
      // form["clearancecode"] = addressInfo["clearancecode"];
      // form["usersheng"] = addressInfo["province"];
      // form["userchengshi"] = addressInfo["city"];
      // form["userstree"] = addressInfo["street"];
      // form["userdoor"] = addressInfo["door"];
      // form["userstreet"] = addressInfo["street"];
      // form["usercode"] = addressInfo["code"];
      // form["useremail"] = addressInfo["email"];
      // form["detail"] = addressInfo["detail"];
      // form["address_id"] = addressInfo["address_id"];
    }
  };

  // 输入事件处理;
  const handleInput = (e) => {
    const field = e.target.dataset.field;
    form[field] = e.target.value;
    saveAddressFormState({ ...form, ...formData });
  };
  // 跳转选择界面
  const toTargetSelect = (e, path) => {
    navigate(path);
  };
  // 表单检测
  const checkForm = () => {
    let bool = true;
    requireFormFields.map((res) => {
      console.log(form[res], res, "check-item");
      if (form[res] == "" || form[res] == undefined) bool = false;
    });
    console.log(bool, "form-check");
    return bool;
  };
  // 提交
  const handleSubmit = (e) => {
    console.log(form, "form");
    if (!checkForm()) {
      showToast({
        message: "请填写完必填项",
      });
      return;
    }
    setLoading(true);
    setLoadingText("请稍等");
    request.post("address/add&wxapp_id=10001", form).then((res) => {
      console.log("添加成功");
      setLoading(false);
      setLoadingText("");
      showToast({
        message: "添加成功",
      });
      saveAddressFormState("");
    });
    console.log(form, "form");
  };
  useEffect(() => {
    console.log("模拟componentDidMount第一次渲染");
    console.log(addressInfo, "addinfo");
    initCreate();
    if (country) {
      form["country_id"] = country["id"];
      formData["country"] = country["title"];
      setForm(form);
      setFormData(formData);
      setCountryData("");
      saveAddressFormState({ ...form, ...formData });
    }
    util.setBarPageView("创建地址");
    return () => {
      console.log("模拟componentWillUnmount执行销毁后");
    };
  }, []);
  return (
    <Page className="page freight">
      <div className="freight-box">
        <div className="form">
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              收件人
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="name"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["name"]}
                  className="form-input"
                  placeholder="请输入收件人"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img26.png" />
              </div>
              联系电话
            </div>
            <div className="form-content">
              <div className="form-content">
                <div className="form-input">
                  <Input
                    type="text"
                    data-field="userphones"
                    onInput={(e) => handleInput(e)}
                    defaultValue={addressForm["phone"]}
                    className="form-input"
                    placeholder="请输入联系人电话"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              身份证号
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="identitycard"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["identitycard"]}
                  className="form-input"
                  placeholder="请输入身份证号"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              通关代码
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="clearancecode"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["identitycard"]}
                  className="form-input"
                  placeholder="请输入代码"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              电话区号
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="telcode"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["tel_code"]}
                  className="form-input"
                  placeholder="请输入电话区号"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img40.png" />
              </div>
              国家/地区
            </div>
            <div className="form-content">
              <div
                className="form-picker"
                onClick={(e) => {
                  toTargetSelect(e, "/common/select/country");
                }}
              >
                <div className="form-picker-input">
                  {addressForm["country"]
                    ? addressForm["country"]
                    : "请选择国家"}
                </div>
                <div className="form-icon"></div>
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              州/省
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="usersheng"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["province"]}
                  className="form-input"
                  placeholder="请输入州/省"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              城市
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="userchengshi"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["city"]}
                  className="form-input"
                  placeholder="请输入城市"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              街道
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="userstree"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["street"]}
                  className="form-input"
                  placeholder="请输入街道"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              门牌号
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="userdoor"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["door"]}
                  className="form-input"
                  placeholder="请输入门牌号"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              邮编
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="usercode"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["code"]}
                  className="form-input"
                  placeholder="请输入邮编"
                />
              </div>
            </div>
          </div>
          <div className="form-group flex">
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img23.png" />
              </div>
              邮箱
            </div>
            <div className="form-content">
              <div className="form-input">
                <Input
                  type="text"
                  data-field="useremils"
                  onInput={(e) => handleInput(e)}
                  defaultValue={addressForm["email"]}
                  className="form-input"
                  placeholder="请输入邮箱"
                />
              </div>
            </div>
          </div>
          <div className="form-group" style={{ height: 150 + "px" }}>
            <div className="form-label">
              <div className="form-label-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images/dzx_img41.png" />
              </div>
              地址详情
            </div>
            <div className="form-content">
              <Input.TextArea
                className="form-textarea"
                data-field="detail"
                onInput={(e) => handleInput(e)}
                defaultValue={addressForm["detail"]}
                style={{
                  width: 90 + "%",
                  height: 100 + "px",
                  margin: "0 auto",
                }}
              />
            </div>
          </div>
        </div>
      </div>
      <div className="button">
        <Button className="btn" onClick={(e) => handleSubmit(e)}>
          保存
        </Button>
      </div>
      <Loading is={loading} text={loadingText} />
    </Page>
  );
};
export default AddressPage;
